<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个人用户管理</title>

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<!-- 引用css -->
	<link type="text/css" rel="stylesheet" href="../../../bootstrap/css/bootstrap.min.css" />
	<link type="text/css" rel="stylesheet" href="../../../bootstrap/css/bootstrap-fileinput.css" />
	<link type="text/css" rel="stylesheet" href="../../../bootstrap/css/bootstrap-datetimepicker.min.css"/>
	<link rel="stylesheet" href="../../../css/commod.css" type="text/css">
	<link href="../../../css/css/component.css" rel="stylesheet">
	<!-- 引用js -->
	<script type="text/javascript" src="../../../bootstrap/js/jquery.min.js"></script>
	<script type="text/javascript" src="../../../bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../../../bootstrap/js/docs.min.js"></script>
	<script type="text/javascript" src="../../../bootstrap/js/bootstrap-fileinput.js"></script>
	<script type="text/javascript" src="../../../bootstrap/js/bootstrap-switch.js"></script>
	
	<script type="text/javascript" src="../../../js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="../../../bootstrap/js/moment-with-locales.min.js"></script>
	<script type="text/javascript" src="../../../bootstrap/js/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript" src="../../../bootstrap/jquery.qrcode.min.js"></script>
	
	<!--去掉悬浮窗 -->
	<style type="text/css">#cl-dashboard{display: none}</style>
	
	<link title="" href="../../formwork/css/style.css" rel="stylesheet" type="text/css"/>
	<link title="blue" href="../../formwork/css/dermadefault.css" rel="stylesheet" type="text/css"/>
	<link title="green" href="../../formwork/css/dermagreen.css" rel="stylesheet" type="text/css" disabled="disabled"/>
	<link title="orange" href="../../formwork/css/dermaorange.css" rel="stylesheet" type="text/css" disabled="disabled"/>
	<link href="../../formwork/css/templatecss.css" rel="stylesheet" title="" type="text/css" />
	<!-- 时间 -->
	<script type="text/javascript" src="../../../js/bsdatetime.js"></script>

</head>
<body>
	<div class="container-fluid">
	   <div class="info-center" id="hader_h2">
			<h2>app用户管理</h2>    
	   </div>  
	   
		<!-- individual -->
		<div class="border_div">
			<div class="bg-info width_height_padding">
				<span class="glyphicon glyphicon-search"></span>&nbsp;&nbsp;筛选查询
			</div>
			<div class="width_padding">
				<form action="" class="form-inline">
				<div class="row">
					<div class="col-md-10">
								<div class="form-group col-md-5" >
									<label for="">开始时间：</label>
									<!-- 指定 date标记 -->
									<div class='input-group date' id='datetimepicker1'>
										<input type='text' class="form-control" /> <span
											class="input-group-addon"> <span
											class="glyphicon glyphicon-calendar"></span>
										</span>
									</div>
								</div>
								
								<div class="form-group col-md-5">
									<!-- 指定 date标记 -->
									<label for="">结束时间：</label>
									<div class='input-group date' id='datetimepicker2'>
										<input type='text' class="form-control" /> <span
											class="input-group-addon"> <span
											class="glyphicon glyphicon-calendar"></span>
										</span>
									</div>
								</div>
								
						</div>

					<div class="form-group col-md-5">
						<label for="">搜索：</label> 
						<input type="text" class="form-control" style="width: 75%" placeholder="请输入相关账号" />
					</div>
					
					<div class="form-group col-md-2">
						<input type="button" class="btn btn-primary col-md-4" value="查询"/>
						<input type="button" class="btn btn-default col-md-4 margin-width" value="重置"/>
					</div>
				</div>
				</form>
			</div>
		</div>
		<!-- 个人用户  -->
		<div class="table-responsive" style="margin-top: 30px;">
				<table class="table table-striped table-bordered table-hover text-center table-container" align="center">
					<tr class="info">
						<th class="text-center">照片</th>
						<th class="text-center">用户账号</th>
						<th class="text-center">昵称</th>
						<th class="text-center">性别</th>
						<th class="text-center">生日</th>
						<th class="text-center">所在地</th>
						<th class="text-center">注册时间</th>
						<th class="text-center">操作</th>
					</tr>
					<tr>
						<td><img alt="" src="holder.js/66x67"></td>
						<td>13222222222</td>
						<td>冬天里的胖子</td>
						<td>男</td>
						<td>1998-10-10</td>
						<td>北京</td>
						<td>2017-11-11 11:11:11</td>
						<td style="margin: 0;padding: 0">
							<a href="javascript:;" class="md-trigger btn btn-link" data-modal="modal-2">设置密码</a>
						    <a href="javascript:;" class="btn btn-link">查看</a>
							<a href="javascript:;" class="md-trigger btn btn-link" data-modal="modal-1">删除</a>
						</td>
					</tr>
					
					<tr>
						<td colspan=10>
							<!-- 分页引用 -->
							<div class="pull-right">
								<nav aria-label="Page navigation">
								<ul class="pagination">
									<span class="pull-left page_span">共10页/100条数据</span>
									<li><a href="javascript:;">首页</a></li>
									<li><a href="javascript:;" aria-label="Previous"> <span
											aria-hidden="true">&lt;</span></a></li>
									<li class="active"><a href="javascript:;">1</a></li>
									<li><a href="javascript:;">2</a></li>
									<li><a href="javascript:;">3</a></li>
									<li><a href="javascript:;">...</a></li>
									<li><a href="javascript:;">50</a></li>
									<li><a href="javascript:;" aria-label="Next"> <span
											aria-hidden="true">&gt;</span>
									</a></li>
									<li><a href="javascript:;">尾页</a></li>

									<span class="pull-left page_span_show">每页显示</span>

									<span class="pull-right page_right"> <select name="" id=""
										class="form-control" style="width: 95%">
											<option value="">10</option>
											<option value="">20</option>
											<option value="">50</option>
											<option value="">100</option>
											<option value="">200</option>
											<option value="">500</option>
									</select>
									</span>
								</ul>
								</nav>
								</div>
								<script>
									$(".pagination li").click(function() {
										$(this).addClass("active");
										$(".pagination li").not($(this)).removeClass("active");
									});
								</script>
						</td>
					</tr>
				</table>
		</div>	
	</div>
	<!-- 提示删除语 -->
	<div class="md-modal md-effect-2" id="modal-1">
		<div class="modal-dialog modal-sm" role="document">
			<div class="md-content">
				<div class="modal-header bg-primary text-center" style="height: 10px;font-size: 18px;">
					删除提示
				</div>
				<div class="modal-body" style="padding-bottom: 15%">
					<div>是否删除数据？</div><br>	
						<input type="button" class="btn btn-default md-close pull-right margin-width" value="否" />
						<input type="button" class="btn btn-primary pull-right " value="是" />
				</div>
			</div>
		</div>
	</div>
	<!-- 用户密码设置 -->
		<div class="md-modal md-effect-1" id="modal-2" style="margin-top: 12%">
		<div class="md-content">
			<div class="modal-header bg-primary text-center"
				style="height: 10px;font-size: 18px;">用户密码设置</div>
			<div>
			<form action="">
				<div class="modal-body">
   					<div class="form-group">
   						<label for="">用户密码设置：</label>
   							<input type="text" name="" id="" class="form-control " placeholder="请输入用户的密码"/>
   					</div>
				</div>
				<div class="modal-footer">
					<input type="button" class="btn btn-default md-close" data-dismiss="modal"  value="取消"/><input type="submit" class="btn btn-primary margin-width"  value="确认" />
				</div>
			</form>
			</div>
		</div>
	</div>
	<style>
		td{
			text-align: center;
			vertical-align:middle;
		}
	</style>
	
<script>
	/* 按钮选择 */
	$("li").click(function(){
    	$(this).addClass("active");
    	$("li").not($(this)).removeClass("active");
    	
    	id=$(this).index("li");
    	$(".navs").eq(id).show();
    	$(".navs").not($(".navs").eq(id)).hide();
    });
    $(".navs").eq(0).show(); 
</script>

<script src="../../../js/js/classie.js"></script>
<script src="../../../js/js/modalEffects.js"></script>
</body>
</html>